<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: pie4
 * @LastEditTime: 2021-11-18 10:01:01
 * @FilePath: \tianjushi-kanban\src\components\charts\Pie4.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import {
  onMounted,
  toRefs,
  ref,
  reactive,
  watch,
  computed,
  nextTick,
  version,
} from "vue";
import { resetChartStyle, showLoading, hexToRgba } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata:{
      type: Array,
      default:[
        {
          name: '待检',
          value: 754,
        },
        {
          name: '合格品',
          value: 611,
        },
        {
          name: '不良品',
          value: 400,
        },
        {
          name: '送检中',
          value: 200,
        },
      ]
    },
    color: {
      default: ["#1F9EFF", "#1BC85E", "#FFC107", "#FF6C6B"],
      type: Array,
    },
    fontSize: {
      default: 18,
      type: Number,
    },
    unit: {
      type: String,
      default: "kg",
    },
  },
  setup: function (props, context) {
    let chartInstance = null; //折线不能用响应式接收echart
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(chartInstance);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });
    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {
      const data = props.chartdata;
      let arrName = getArrayValue(data, "name");
      let arrValue = getArrayValue(data, "value");
      let sumValue = eval(arrValue.join("+"));
      let objData = array2obj(data, "name");
      let optionData = getData(data);
      function getArrayValue(array, key) {
          key = key || "value";
        let res = [];
        if (array) {
          array.forEach(function (t) {
            res.push(t[key]);
          });
        }
        return res;
      }

      function array2obj(array, key) {
        let resObj = {};
        for (let i = 0; i < array.length; i++) {
          resObj[array[i][key]] = array[i];
        }
        return resObj;
      }

      function getData(data) {
        let res = {
          series: [],
          yAxis: [],
        };
        for (let i = 0; i < data.length; i++) { 
          res.series.push({
            name: "",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [80 - i * 15 + "%", 70 - i * 15 + "%"],
            center: ["40%", "50%"],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 10,
            },
            data: [
              {
                value: data[i].value,
                name: data[i].name,
              },
              {
                value: sumValue - data[i].value,
                name: "",
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          });
          res.series.push({
            name: "",
            type: "pie",
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [80 - i * 15 + "%", 70 - i * 15 + "%"],
            center: ["40%", "50%"],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 10,
            },
            data: [
              {
                value: 7.5,
                itemStyle: {
                  color: "rgba(32,187,252,0.15)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
              {
                value: 2.5,
                name: "",
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          });
          res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
        }
        return res;
      }

      const option = {
        legend: {
          show: true,
          icon: "circle",
          top: "center",
          left: "70%",
          data: arrName,
          width: 50,
          padding: [0, 5],
          itemGap: 25,
          formatter: function (name) {
            return (
              "{title|" +
              name +
              "}\n{value|" +
              objData[name].value +
              "}  {unit|"+props.unit+"}"
            );
          },

          textStyle: {
            rich: {
              title: {
                fontSize: props.fontSize-2,  
                padding: [0,0,5,0],
                color:  props.color[0],
              },
              value: {
                fontSize: props.fontSize, 
                color: "#fff",
              },
              unit: {
                fontSize: props.fontSize-2,   
                color: props.color[0],
              },
            },
          },
        },
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{b}:{c}({d}%)",
        },
        color: props.color,
        grid: {
          top: "14%",
          bottom: "50%",
          left: "40%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: { 
              //align:'center', 
              interval: 0,
              inside: true,
              textStyle: {
                color: "#fff",
                fontSize: props.fontSize-2,
              },
              show: true,
            },
            data: optionData.yAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: optionData.series,
      };
      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>